<template>
  <div class="v-icon" :style="[{ width: state.size, height: state.size }, state.style]" :class="[state.class]">
    <template v-if="['el', 'element'].indexOf(state.type) != '-1'">
      <el-icon :style="{ color: state.color || '', fontSize: state.size }">
        <component v-if="state.value" :is="state.value"></component>
      </el-icon>
    </template>
    <template v-if="['vicon'].indexOf(state.type) != '-1'">
      <Icon :size="state.size" :color="state.color || ''">
        <component v-if="state.value" :is="state.value"></component>
      </Icon>
    </template>
    <template v-if="['img', 'image'].indexOf(state.type) != '-1'">
      <el-image :style="{ width: state.size, height: state.size }" :src="state.value" fit="fill" />
    </template>
    <template v-if="['iconfont'].includes(state.type)">
      <i
        :class="{ iconfont: true, [state.value]: true }"
        :title="title"
        :style="{ color: state.color, fontSize: state.size }"
      ></i>
    </template>
  </div>
</template>
<script setup>
  import { reactive, getCurrentInstance, onMounted, onUnmounted, watch } from 'vue'
  defineOptions({ name: 'v-icon' })
  import { Icon } from '@vicons/utils'

  const { proxy } = getCurrentInstance()
  const _this = proxy
  const props = defineProps({
    modelValue: {
      type: String,
      default: () => {
        return ''
      },
    },
    value: [String, undefined], // type#code
    size: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: () => null,
    },
    style: {
      type: Object,
      default: () => {},
    },
    class: {
      type: [Object, String],
      default: () => {},
    },
    title: String,
  })
  const state = reactive({
    modelValue: props.modelValue || props.value,
    type: '',
    value: '',
    color: '',
    size: props.size,
    color: props.color,
    style: props.style,
    class: props.class,
  })

  const init = () => {
    if (state.modelValue) {
      const _ary = state.modelValue.split('#')

      // 如果只有图标名，则默认显示 elementplus的图标样式
      if (_ary.length === 1) {
        state.type = 'el'
        state.value = _ary[0]
        return
      }
      if (_ary[0]) state.type = _ary[0]
      if (_ary[1]) state.value = _ary[1]
    }
    //console.log('------------color---------------')
    //console.log(state.color)
  }
  watch(
    () => props,
    (newVal, oldVal) => {
      state.modelValue = props.modelValue
      if (props.value) {
        state.modelValue = props.value
      }
      state.size = props.size
      state.color = props.color
      state.style = props.style
      state.class = props.class
      init()
    },
    { deep: true }
  )

  onMounted(() => {
    if (props.value) {
      init()
    }
  })

  onUnmounted(() => {})
</script>
<style scoped rel="stylesheet/scss" lang="scss">
  .v-icon {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
</style>
